<template>
  <div class="app-container">

    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="modelCode" placeholder="请输入模板文本编号" size="mini">
          <template slot="prepend">编号</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-select clearable placeholder="请选择模板文件种类" size="mini" v-model="fileInfo.clazz">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="pan-btn primary-btn" size="mini" icon="el-icon-search" @click="searchData()">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" class="pan-btn success-btn" size="mini" icon="el-icon-upload"
          @click="dialogVisible = true">上传</el-button>
      </el-form-item>
    </el-form>

    <!--表-->
    <el-table :data="dataList" border fit highlight-current-row style="width: 100%">
      <el-table-column prop="modelCode" header-align="center" align="center" label="文件编号" width="200">
      </el-table-column>
      <el-table-column prop="clazz" header-align="center" align="center" label="所属分类">
        <template slot-scope="scope">
          <div v-if="scope.row.clazz == 'bc'" >包材(报告)</div>
          <div v-else-if="scope.row.clazz == 'cp'" >成品(报告)</div>
          <div v-else-if="scope.row.clazz == 'fl'" >辅料(报告)</div>
          <div v-else-if="scope.row.clazz == 'yl'" >原料(报告)</div>
<!--          <div v-else-if="scope.row.clazz == 'wk'" >稳考(报告)</div> -->
          <div v-else-if="scope.row.clazz == 'zjp'" >中间品(报告)</div>
<!--          <div v-else-if="scope.row.clazz == 'zcbc'" >自产包材(报告)</div> -->
<!--          <div v-else-if="scope.row.clazz == 'wkqy'" >稳考(请验单)</div> -->
          <div v-else-if="scope.row.clazz == 'wlqy'" >物料请验单</div>
          <div v-else-if="scope.row.clazz == 'cpqy'" >成品请验单</div>
          <div v-else-if="scope.row.clazz == 'wlps'" >物料放行审核单</div>
          <div v-else-if="scope.row.clazz == 'wlysd'" >物料验收单</div>
<!--          <div v-else-if="scope.row.clazz == 'wljs'" >物料接收单</div>
          <div v-else-if="scope.row.clazz == 'wlbs'" >物料标识卡</div>
          <div v-else-if="scope.row.clazz == 'cpps'" >产品放行审核单</div>
		  <div v-else-if="scope.row.clazz == 'gjgjw'">关键供给物(报告)</div> -->
      <div v-else-if="scope.row.clazz == 'yfget'" >原辅料取样记录</div>
      <div v-else-if="scope.row.clazz == 'nbget'" >内包取样记录</div>
      <div v-else-if="scope.row.clazz == 'otherget'" >其他取样记录</div>
      <div v-else-if="scope.row.clazz == 'hwkyfb'" >货位卡(原辅包)</div>
      <div v-else-if="scope.row.clazz == 'hwkcp'" >货位卡(成品)</div>
      <div v-else-if="scope.row.clazz == 'wlps'" >物料放行审核单</div>
      <div v-else-if="scope.row.clazz == 'cpps'" >产品放行审核单</div>
        </template>
      </el-table-column>
      <el-table-column prop="reMark" header-align="center" align="center" label="备注">
      </el-table-column>
      <el-table-column prop="createTime" header-align="center" align="center" label="上传日期">
      </el-table-column>
      <el-table-column prop="updateTime" header-align="center" align="center" label="更新日期">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="preview(scope.row)">预览</el-button>
          <el-button type="text" size="small" @click="downloadData(scope.row)">下载</el-button>
          <el-button type="text" style="color: red;" size="small" @click="deleteData(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"></el-pagination>

    <el-dialog title="打印模板上传" width="40%" :visible.sync="dialogVisible" :before-close="handleClose">

    <el-form :inline="true">
      <el-form-item label="模板分类">
        <el-select clearable size="mini" v-model="fileInfo.clazz">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <br />
  <el-form-item label="备注信息">
    <el-input type="textarea" :rows="10" v-model="fileInfo.reMark"></el-input>
  </el-form-item>
     <el-form-item>
       <upload-docx-component :on-success="handleSuccess" :before-upload="beforeUpload" :fileInfo="fileInfo"/>
     </el-form-item>
    </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import axios from "axios";
  import UploadDocxComponent from '@/components/UploadDocx/index.vue'

  import CommonMethod from '@/views/mixin/common'
  import {
    uploadDocx,
    getPrintModelList,
    delModel,
    downloadDocx,
    viewModel
  } from '@/api/print'
  import {
    CODE_OK
  } from '@/common/js/config'

  export default {
    name: 'printmodel',
    data() {
      return {
        options: [
          {
            value: 'wlps',
            label: '物料放行审核单'
          },{
            value: 'cpps',
            label: '产品放行审核单'
          },
          {
            value: 'bc',
            label: '包材(报告)'
          },
          {
            value: 'cp',
            label: '成品(报告)'
          },
          {
            value: 'fl',
            label: '辅料(报告)'
          },
          {
            value: 'yl',
            label: '原料(报告)'
          },
          // {
          //   value: 'wk',
          //   label: '稳考(报告)'
          // },
          {
            value: 'zjp',
            label: '中间品(报告)'
          },
          // {
          //   value: 'zcbc',
          //   label: '自产包材(报告)'
          // },
          // {
          //   value: 'wkqy',
          //   label: '稳考(请验单)'
          // },
          // {
          //   value: 'wlqy',
          //   label: '物料(请验单)'
          // },
          {
            value: 'wlysd',
            label: '物料验收单'
          },
          {
            value: 'wlqy',
            label: '物料请验单'
          },
          {
            value: 'cpqy',
            label: '成品请验单'
          },
          // {
          //   value: 'wljs',
          //   label: '物料接收单'
          // },{
          //   value: 'wlbs',
          //   label: '物料标识卡'
          // },
          // {
          //   value: 'wlps',
          //   label: '物料放行审核单'
          // },
          //{
          //   value: 'cpps',
          //   label: '产品放行审核单'
          // },
   //        {
			// value: 'gjgjw',
			// label: '关键供给物(报告)'
			// },
      {
        value: 'yfget',
        label: '原辅料取样记录'
      },{
        value: 'nbget',
        label: '内包取样记录'
      },{
        value: 'otherget',
        label: '其他取样记录'
      },{
        value: 'hwkyfb',
        label: '货位卡(原辅包)'
      },{
        value: 'hwkcp',
        label: '货位卡(成品)'
      }
        ],
        dataList: [],
        dialogVisible: false,
        fileList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        modelCode:"",
        fileInfo:{
          clazz:"",
          reMark:""
        }
      }
    },
    components: { UploadDocxComponent },
    mounted() {
       this.getDataList();
    },
    methods: {
      preview(row){
      	const param = {
      		fileName:row.modelCode
      	}
      viewModel(param).then(res=>{
      	if (res.code === CODE_OK) {
      		window.open(res.url,'_blank')
      	}else{
			this.$message({
			  message: res.msg,
			  type: 'error',
			  duration: 3000
			});
				}
      }).catch()
        },
      downloadData(row){
       window.open("/api/print/downLoad?fileName="+row.modelCode+'.docx','_blank')
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      deleteData(row){
        this.$confirm('您确定删除吗？').then(_ => {
        let params = {
           modelCode:row.modelCode
         }
         delModel(params).then(res=>{
           if (res.code === CODE_OK) {
             this.$message({
               message: '删除成功',
               type: 'success',
               duration: 3000
             });
           }
           this.getDataList();
         }).catch();
        }).catch(_ => {})
      },
      searchData(){
        this.getDataList();
      },
      handleSuccess(){
        alert("成功")
      },
      beforeUpload(){},
      getDataList(){
        const params = {
          page: this.pageIndex,
          limit: this.pageSize,
          modelCode: this.modelCode || null,
          clazz: this.fileInfo.clazz || null
        }
        getPrintModelList(params).then(res=>{
	  			if (res.code === CODE_OK) {
	  				this.dataList = res.page.list
            if (this.dataList.length == 0) {
              this.$message({
                message: '系统提示您：当先系统不存在打印模板，请上传',
                type: 'error',
                duration: 3000
              })
            }
	  				this.totalPage = res.page.totalCount
	  			}else{
	  				this.$message.error(res.msg)
	  			}
        }).catch();
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>

<style>
  >>>.el-form-item__content {
    line-height: normal;
  }

  input[type="file"] {
    display: none;
  }
</style>
